<template>
    <div class="gantt-block">
        <div ref="gantt" :style="`height: ${height};`"></div>
    </div>
</template>

<script>
  import {gantt} from 'dhtmlx-gantt'
  import '../assets/gantt_reset.css'
  import 'dhtmlx-gantt/codebase/ext/dhtmlxgantt_tooltip'
  import 'dhtmlx-gantt/codebase/locale/locale_cn'
  import '../../public/lib/exportGantt'

  export default {
    data() {
      return {
        myTask: this.tasks
      }
    },
    props: {
      height: {
        type: String,
        default: "calc(100vh - 250px)"
      },
      tasks: {
        type: Object,
        default() {
          return {
            data: [],
            links: []
          }
        }
      }
    },
    watch: {
      tasks: {
        deep: true,
        handler(val) {
          this.myTask = val
          this.initGantt()
        }
      }
    },
    mounted() {
      this.initGantt()
    },
    methods: {
      initGantt() {
        const vm = this
        gantt.config.xml_date = '%Y-%m-%d'
        gantt.config.scale_unit = 'day'
        gantt.config.date_scale = '%Y-%m-%d'
        gantt.config.details_on_dblclick = false
        gantt.config.readonly = true
        gantt.config.columns = [
          {name: 'phaseName', label: '阶段名称', align: 'center', width: '200'},
          {name: 'start_date', label: '开始时间', align: 'center', width: '100'},
          {name: 'end_date', label: '结束时间', align: 'center', width: '100'},
          {name: 'paymentRate', label: '付款率(%)', align: 'center', width: '90'},
          {name: 'completedRate', label: '完成率(%)', align: 'center', width: '90'}
        ]
        gantt.templates.task_text = function (start, end, task) {
          return ''
        }
        gantt.templates.progress_text = function (start, end, task) {
          return '<div style=\'width:' + task.completedRate + '%;\'><b> 完成率:</b>' + task.completedRate + '% </div>'
        }
        gantt.templates.tooltip_text = function (start, end, task) {
          return '<b>任务名称:</b> ' + task.phaseName + '<br/><br/><b> 完成率:</b> ' + task.completedRate + '%' + '<br/><br/><b>开始时间:</b> ' + vm.formatTime('yyyy-MM-dd', task.start_date) + '<br/><br/><b>结束时间:</b> ' + vm.formatTime('yyyy-MM-dd', task.end_date)
        }
        gantt.init(vm.$refs['gantt'])
        gantt.attachEvent('onGanttReady', function () {
          let tooltips = gantt.ext.tooltips
          tooltips.tooltip.setViewport(gantt.$task_data)
        })
        gantt.clearAll()
        gantt.parse(vm.myTask)
      },
      exportGantt(mode) {
        if (mode === 'png') {
          gantt.exportToPNG({
            exportName: '甘特图',
            locale: 'cn',
            header: '<link rel="stylesheet" href="../assets/gantt_reset.css">'
          })
        } else if (mode === 'pdf') {
          gantt.exportToPDF({
            exportName: '甘特图',
            locale: 'cn',
            header: '<link rel="stylesheet" href="../assets/gantt_reset.css">'
          })
        }
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
    .gantt-block /deep/ .gantt_task_progress {
        text-align: left;
        box-sizing: border-box;
        color: white;
        font-weight: bold;
        width: auto !important;
        div {
            background-color: #80beff;
        }
    }
</style>
